import React, { useEffect, useState } from 'react';
import { Col, Row, Card } from 'tdesign-react';
import ProductCard from './ProductCard';
import Style from '../index.module.less';
import { getCourseList, ICourseInfo } from '../../../../api/course/course';

const Product = () => {
  const [courseList, setCourseList] = useState<ICourseInfo[]>([]);
  useEffect(() => {
    getCourseList({ current: 1, size: 10 }).then((res) => {
      setCourseList(res.data.records);
    });
  }, []);
  return (
    <Card title='课程列表' className={Style.cardBox} bordered={false}>
      <div>
        <Row gutter={[16, 16]}>
          {courseList.map((value) => (
            <Col key={value.courseId} xs={12} xl={4}>
              <ProductCard
                courseTime={value.courseTime}
                title={value.name}
                desc={value.description}
                tags={[value.type]}
                percent={`${value.account}/100(节)`}
                startTime={value.startTime}
                classTime={value.classTime}
                teacherName={value.teacherName}
                price={value.price}
                progress={(value.account / 100) * 100}
                picture={value.picture}
                trackColor='#D4E3FC'
              />
            </Col>
          ))}
        </Row>
      </div>
    </Card>
  );
};

export default React.memo(Product);
